<template>
  <right-canvas-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-multi-bg">
      <switch-normal v-model="commonAttr.isLastHidden" label="动画后隐藏最后一项" @change="onChangeAttr"></switch-normal>
      <input-normal label="暂停时间" v-model="commonAttr.pauseTime" @change="onChangeAttr"></input-normal>
      <input-normal label="动画时间" v-model="commonAttr.animateTime" @change="onChangeAttr"></input-normal>
      <input-normal label="偏移高度" v-model="commonAttr.transformY" @change="onChangeAttr"></input-normal>
      <el-button type="primary" @click.stop="onAddItem" class="margin-left-right-16 margin-bottom-10 margin-top-10">
        <el-icon><i class="jy-icon-plus"></i></el-icon>增加动画帧
      </el-button>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
          <template #title>
            多层背景图{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <add-img-con class="margin-left-right-16" :url="item.url" picAttr="url" :index="index" :height="100" :isCrop='false'></add-img-con>
          <input-normal label="背景url" v-model="item.url" @change="onUpdateItem(index)"></input-normal>
          <input-normal label="x坐标" v-model="item.x" @change="onUpdateItem(index)"></input-normal>
          <input-normal label="y坐标" v-model="item.y" @change="onUpdateItem(index)"></input-normal>
          <input-normal label="宽度" v-model="item.width" @change="onUpdateItem(index)"></input-normal>
          <input-normal label="高度" v-model="item.height" @change="onUpdateItem(index)"></input-normal>
          <input-normal label="滚动速度" v-model="item.speed" @change="onUpdateItem(index)"></input-normal>
          <input-normal label="偏移" v-model="item.offset" @change="onUpdateItem(index)"></input-normal>
          <input-normal label="层次" v-model="item.zIndex" @change="onUpdateItem(index)"></input-normal>
          <!-- <switch-normal v-model="item.isMoveX" label="横向移动效果" @change="onUpdateItem(index)"></switch-normal> -->
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </right-canvas-template>
</template>
<script>
  import RightCanvasTemplate from '@/views/canvas/right/right-canvas-template.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'

  import { canvasUtils } from '@/views/js/canvas-utils'

  export default {
    name: "RightMultiBg",
    mixins: [canvasUtils],
    created() {},
    components: {
      RightCanvasTemplate,
      InputNormal,
      AddImgCon,
      SwitchNormal,
    },
  };
</script>

